<template>
    <div class="login">
        <!-- 登录 -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
            <h2 class="title">用户登录</h2>
            <div class="link" style="margin-bottom: 10px;">
                <el-link class="inner-link" @click="isUseRegister">用户注册</el-link>
            </div>
            <el-form-item prop="account">
                <el-input v-model="loginForm.account" prefix-icon="User" autocomplete="off" clearable placeholder="账号"/>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" prefix-icon="Lock" type="password" autocomplete="off" clearable show-password placeholder="密码"/>
            </el-form-item>
            <el-form-item prop="code">
                <!-- 事件监听器，它用于监听键盘的 keyup 事件，并在用户松开 Enter 键时调用 doLogin 方法 -->
                <el-input
                    v-model="loginForm.code"
                    prefix-icon="CircleCheck"
                    autocomplete="off"
                    placeholder="请输入验证码"
                    style="width: 60%;"
                    v-on:keyup.enter="doLogin"
                />
                <div class="login-code">
                    <img :src="codeImage" class="login-code-img" @click="getCode">
                </div>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button type="primary" style="width: 100%;" @click="doLogin">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from 'vue'; // gci：这个函数用于获取当前组件实例的信息
const { proxy } = getCurrentInstance(); // 对象解构赋值 proxy是一个代理对象，提供了对组件实例属性和方法的访问，不需要用this
// const router = useRouter(); // 获取路由实例

// 表单相关
const loginFormRef = ref(null)
const loginForm = reactive({})

const codeImage = ref('')
const codeId = ref('')

const isUseRegister = () => {
    proxy.router.push('register')
}

const doLogin = () => {
    // 验证用户输入的登录表单
    loginFormRef.value.validate(async (valid) => {
        if(!valid) {
            return // 如果不通过，直接返回 不执行后面的登录逻辑
        }
        // 使用 Object.assign 创建一个 loginForm 的浅拷贝，确保原始数据不被修改。params 将用于发送请求。
        let params = Object.assign({}, loginForm) 
        // 发送post请求
        let result = await proxy.axios.post('login', params); // axios 会自动将这个对象转换为 JSON 字符串
        // 如果登录请求失败（result 为 false），调用 getCode() 函数获取新的验证码，并返回，停止执行后续代码。
        if(!result) {
            getCode()
            return
        }
        // 如果登录成功，将返回的结果（可能是用户信息或令牌）存储在名为 'bbs-admin' 的 Cookie 中
        // proxy.cookies.set('parking-admin', result, 0)
        proxy.cookies.set('bbs-web', JSON.stringify(result)) // JSON.stringify() 方法可以将JavaScript对象或值转换为JSON字符串
        sessionStorage.removeItem('default-active')
        proxy.msg.success('登录成功');
        proxy.router.push('home')
    })
}

const getCode = async() => {
    let result = await proxy.axios.get('login-code');
    if(!result) {
        return;
    }
    codeImage.value = result.image;
    codeId.value = result.codeId;
    loginForm.codeId = result.codeId;
}

getCode()

const loginRules = {
    account: [
        {
            required: true,
            message: '请输入账号'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ],
    code: [
        {
            required: true,
            message: '请输入验证码'
        }
    ]
}

</script>

<style lang="scss" scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 100%;
    // width: 100%;
    width: 100vw;
    height: 100vh;
    background-color: #707070;
}
.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}
.link {
    text-align: right;
}
.login-form {
    border-radius: 6px;
    background-color: #ffffff;
    padding: 30px 30px 10px 30px;
    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 20px;
    }
}
.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}
.login-code {
    width: 33%;
    height: 38px;
    float: right;
    margin-left: 10px;
    img {
        cursor: pointer;
        vertical-align: middle;
    }
}
.login-code-img {
    height: 30px;
}
</style>